
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-more"></i>
                    <div class="name">more</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontdizhi"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-iconfontdizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinwen"></i>
                    <div class="name">新闻</div>
                    <div class="fontclass">.icon-xinwen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuojiantou"></i>
                    <div class="name">左箭头</div>
                    <div class="fontclass">.icon-zuojiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontjiantou2"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-iconfontjiantou2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuxiaologout10"></i>
                    <div class="name">注销</div>
                    <div class="fontclass">.icon-zhuxiaologout10</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-job"></i>
                    <div class="name">招聘</div>
                    <div class="fontclass">.icon-msnui-job</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiye"></i>
                    <div class="name">企业</div>
                    <div class="fontclass">.icon-qiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-beizhixingrenxinxichaxun"></i>
                    <div class="name">被执行人信息查询</div>
                    <div class="fontclass">.icon-beizhixingrenxinxichaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-farenshenfenzheng"></i>
                    <div class="name">法人身份证</div>
                    <div class="fontclass">.icon-farenshenfenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyiren"></i>
                    <div class="name">受益人</div>
                    <div class="fontclass">.icon-shouyiren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baobiao"></i>
                    <div class="name">报表</div>
                    <div class="fontclass">.icon-baobiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liulan"></i>
                    <div class="name">浏览</div>
                    <div class="fontclass">.icon-liulan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingzhengfawu"></i>
                    <div class="name">行政法务00</div>
                    <div class="fontclass">.icon-xingzhengfawu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxianganniu"></i>
                    <div class="name">分享按钮</div>
                    <div class="fontclass">.icon-fenxianganniu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plus-share"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-plus-share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caiwushuju"></i>
                    <div class="name">财务数据</div>
                    <div class="fontclass">.icon-caiwushuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-group53"></i>
                    <div class="name">企业网银</div>
                    <div class="fontclass">.icon-group53</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alter"></i>
                    <div class="name">变更</div>
                    <div class="fontclass">.icon-alter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiyeshangbiao"></i>
                    <div class="name">企业商标</div>
                    <div class="fontclass">.icon-qiyeshangbiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paimai"></i>
                    <div class="name">拍卖</div>
                    <div class="fontclass">.icon-paimai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodetouzi"></i>
                    <div class="name">我的投资</div>
                    <div class="fontclass">.icon-wodetouzi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanli"></i>
                    <div class="name">专利</div>
                    <div class="fontclass">.icon-zhuanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tree-round-tax"></i>
                    <div class="name">tree-round-税务</div>
                    <div class="fontclass">.icon-tree-round-tax</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongshangdengji"></i>
                    <div class="name">工商登记</div>
                    <div class="fontclass">.icon-gongshangdengji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiezhu"></i>
                    <div class="name">协助</div>
                    <div class="fontclass">.icon-xiezhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangdiyadengji"></i>
                    <div class="name">车辆抵押登记</div>
                    <div class="fontclass">.icon-cheliangdiyadengji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caipanwenshu"></i>
                    <div class="name">裁判文书</div>
                    <div class="fontclass">.icon-caipanwenshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chouchajiancha"></i>
                    <div class="name">抽查检查</div>
                    <div class="fontclass">.icon-chouchajiancha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fayuangonggao"></i>
                    <div class="name">法院公告</div>
                    <div class="fontclass">.icon-fayuangonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongshichufa"></i>
                    <div class="name">公示处罚</div>
                    <div class="fontclass">.icon-gongshichufa</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongshixuke"></i>
                    <div class="name">公示许可</div>
                    <div class="fontclass">.icon-gongshixuke</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dongchandiya"></i>
                    <div class="name">动产抵押</div>
                    <div class="fontclass">.icon-dongchandiya</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gudongxinxi"></i>
                    <div class="name">股东信息</div>
                    <div class="fontclass">.icon-gudongxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guquanchuzhi"></i>
                    <div class="name">股权出质</div>
                    <div class="fontclass">.icon-guquanchuzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huanbaochufa"></i>
                    <div class="name">环保处罚</div>
                    <div class="fontclass">.icon-huanbaochufa</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingyingyichang"></i>
                    <div class="name">经营异常</div>
                    <div class="fontclass">.icon-jingyingyichang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaitinggonggao"></i>
                    <div class="name">开庭公告</div>
                    <div class="fontclass">.icon-kaitinggonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuishouweifa"></i>
                    <div class="name">税收违法</div>
                    <div class="fontclass">.icon-shuishouweifa</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuiwukaipiao"></i>
                    <div class="name">税务开票</div>
                    <div class="fontclass">.icon-shuiwukaipiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhucewangzhan"></i>
                    <div class="name">注册网站</div>
                    <div class="fontclass">.icon-zhucewangzhan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiyenianbao"></i>
                    <div class="name">企业年报</div>
                    <div class="fontclass">.icon-qiyenianbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongshangshixin"></i>
                    <div class="name">工商失信</div>
                    <div class="fontclass">.icon-gongshangshixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuiwupingji"></i>
                    <div class="name">税务评级</div>
                    <div class="fontclass">.icon-shuiwupingji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangjiantou"></i>
                    <div class="name">上箭头</div>
                    <div class="fontclass">.icon-shangjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiaozhizuo-"></i>
                    <div class="name">下箭头</div>
                    <div class="fontclass">.icon-tubiaozhizuo-</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
